<template>
<div class="order_box">
  <div style="display: flex;
    align-items: center;
    justify-content: space-between;
    align-content: stretch;
    flex-wrap: wrap;
    flex-direction: row;">
    <p style="text-align: left;margin:  0 10px;font-family: 微软雅黑">我的订单</p>
    <span @click="go_to_Order(0)" style="margin-right: 10px">查看更多</span>
  </div>
 
 
  <ul>
    <li @click="go_to_Order(0)"><van-icon size="20" name="card" /><br><span>待付款</span></li>
    <li @click="go_to_Order(1)"><van-icon size="20" name="goods-collect" /><br><span>待发货</span></li>
    <li @click="go_to_Order(2)"><van-icon size="20" name="shopping-cart" /><br><span>待收货</span></li>
    <li @click="go_to_Order(3)"><van-icon size="20" name="card" /><br><span>已完成</span></li>
    <li @click="go_to_Order(4)"><van-icon size="20" name="records" /><br><span>售后</span></li>
  </ul>
  
</div>
</template>

<script>
export default {
  name: "Order",
 methods: {
    go_to_Order(index){
      console.log("我被点击了 , index = " + index)
      this.$router.push({name:'all_order', params: {active : index}})
    }
 }
}
</script>

<style scoped lang="less">
.order_box{
  width: 93%;
  height: 77px;
  margin: -40px auto;
  position: relative;
  z-index: 2;
  border-radius: 8px;
  background-color: white;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
p{
  margin:  0 0;
  padding: 0 0;
}
ul{
  padding-left: 0;
  
  display: flex;
  justify-content: center;
  li{
    margin: 0 auto;
  }
}
span{
  font-size: 10px;
}
</style>
